<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script src="/ka/js/config.js"></script>
<html>

<head>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">

    <title>记账</title>
    <link rel="shortcut icon" href="/ka/img/favicon.ico">
    <!--<link rel="stylesheet" href="/css/index.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- global stylesheets -->
    <link rel="stylesheet" href="/ka/css/bootstrap.min.css">
    <link rel="stylesheet" href="/ka/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/ka/css/font-icon-style.css">
    <link rel="stylesheet" href="/ka/css/magnific-popup/magnific-popup.css">
    <link rel="stylesheet" href="/ka/css/style.default.css" id="theme-stylesheet">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="/ka/css/apps/media.css">
    <style>

    </style>
</head>

<body>
<div id="app">
    <header class="header">
        <nav class="navbar navbar-expand-lg ">
            <div class="search-box">
                <button class="dismiss"><i class="icon-close"></i></button>
                <form id="searchForm" action="#" role="search">
                    <input type="search" placeholder="Search Now" class="form-control">
                </form>
            </div>
            <div class="container-fluid ">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <div class="navbar-header">
                        <a href="/ka/toIndex" class="navbar-brand">
                            <div class="brand-text brand-big hidden-lg-down"><img src="/ka/img/logo-white.png" alt="Logo"
                                                                                  class="img-fluid"></div>
                            <div class="brand-text brand-small"><img src="/ka/img/logo-icon.png" alt="Logo"
                                                                     class="img-fluid">
                            </div>
                        </a>
                        <a id="toggle-btn" href="#" class="menu-btn active">
                            <span></span>
                            <span></span>
                            <span></span>
                        </a>
                    </div>
                </div>
                <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
                    <!-- 全屏按钮-->
                    <li class="nav-item d-flex align-items-center full_scr_exp"><a class="nav-link" href="#"><img
                            src="/ka/img/expand.png" onclick="toggleFullScreen(document.body)" class="img-fluid"
                            alt=""></a>
                    </li>
                    <!-- 退出图片-->
                    <li class="nav-item dropdown"><a id="profile" class="nav-link logout" data-target="#" href="#"
                                                     data-toggle="dropdown" aria-haspopup="true"
                                                     aria-expanded="false"><img
                            src="/ka/img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"
                            style="height: 30px; width: 30px;"></a>
                        <ul aria-labelledby="profile" class="dropdown-menu profile">
                            <!--                        注销弹框-->
                            <li>
                                <a rel="nofollow" @click="logout" class="dropdown-item">
                                    <div class="notification">
                                        <div class="notification-content"><i class="fa fa-power-off"></i>注销</div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <div class="page-content d-flex align-items-stretch">
        <!--用户信息-->
        <nav class="side-navbar">
            <div class="sidebar-header d-flex align-items-center"></div>
            <div style="text-align: center" v-cloak>欢迎{{nikeName}}!</div>
            <hr>
            <!--      菜单侧边栏-->
            <ul class="list-unstyled">
                <li class="active"><a href="/ka/toIndex"><i class="fa fa-bar-chart"></i>首页</a></li>
                <li><a href="/ka/toChange" aria-expanded="false"> <i class="fa fa-building-o"></i>记账</a></li>
                <li><a href="/ka/toLog"> <i class="fa fa-map-o"></i>账单</a></li>
                <li><a href="/ka/toIndex" aria-expanded="false"> <i class="fa fa-file-o"></i>统计</a></li>
            </ul>
        </nav>

        <div class="content-inner media-cont">
            <el-card class="box-card">
                <div style="text-align: center">

                    <el-table
                            :data="tableData"
                            style="width: 100%">
                        <el-table-column
                                label="时间"
                                prop="createTime">
                        </el-table-column>
                        <el-table-column
                                label="金额"
                                prop="changeMoney">
                        </el-table-column>
                        <el-table-column
                                label="收支"
                                prop="changeTypeName">
                        </el-table-column>
                        <el-table-column
                                label="备注"
                                prop="note">
                        </el-table-column>
                        <el-table-column
                                align="right">
                            <template slot-scope="scope">

                                <el-popover
                                        placement="top"
                                        width="160"
                                      >
                                    <p>确定删除？</p>
                                    <div style="text-align: right; margin: 0">
                                        <el-button type="primary" size="mini"
                                                   @click="handleDelete(scope.$index, scope.row.id)">确认
                                        </el-button>
                                    </div>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            slot="reference"
                                    >删除
                                    </el-button>
                                </el-popover>

                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
            <div style="text-align: center">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalCount"
                        :current-page.sync="currentPage"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>

</div>
<!--Global Javascript -->
<script src="/ka/js/jquery.min.js"></script>
<script src="/ka/js/popper/popper.min.js"></script>
<script src="/ka/js/tether.min.js"></script>
<script src="/ka/js/bootstrap.min.js"></script>
<script src="/ka/js/jquery.cookie.js"></script>
<script src="/ka/js/jquery.validate.min.js"></script>
<script src="/ka/js/chart.min.js"></script>
<script src="/ka/js/front.js"></script>


</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>


<script th:inline="javascript">

    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            nikeName: "",
            totalCount: 0,
            currentPage: 0,
            visible: false

        },
        methods: {
            handleCurrentChange(page) {
                console.log(`当前页: ${page}`);
                axios.post("/ka/accountLog/findLogByPage?page=" + page + "&rows=" + 10,{userId:this.userId}).then((response) => {
                    if (response.data.flag) {
                        app.tableData = response.data.data.records;
                        app.totalCount = response.data.data.total;
                        app.currentPage = response.data.data.current;
                    }
                });
            },
            handleDelete(index, row) {
                console.log(index, row);
                axios.post("/ka/accountLog/deleteById?id=" + row).then((response) => {
                    if (response.data.flag) {
                        console.log("删除成功!");
                        app.visible = false;
                        app.handleCurrentChange(1);
                    } else {
                        alert("删除失败!");
                        app.handleCurrentChange(1);
                    }
                });

            },
            resetForm() {
            },
            logout() {
                location.href = 'toLogin';
                var uid = getCookie("uid");
                clearCookie("userId");
                clearCookie("uid");
                clearCookie("Authorization");
                clearCookie("username");
                axios.post("/ka/oauth/logout", {uid: uid}).then(function (response) {
                    if (response.data.flag) {
                        location.href = 'toLogin';
                    } else {
                        location.href = 'toLogin';
                    }
                })
            }
        },
        created: function () {
            let userId = getCookie("userId");
            if (userId === '' || userId === null) {
                location.href = '/ka/toLogin';
                return;
            } else {
                this.userId = userId;
            }
            let useraneme = getCookie("username");
            if (useraneme === '' || useraneme === null) {
                this.nikeName = '';
            } else {
                this.nikeName = ',' + useraneme;
            }
            this.handleCurrentChange(1);
        }

    });
</script>


</html>